<template>
    <div>
         <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
            <el-breadcrumb-item >权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>
        <br/>

        <!-- <el-row >
            <el-button icon="el-icon-plus" @click="handleEdit()">添加</el-button>
            
        </el-row> -->

        <br/>
        <!--列表-->
        <el-table size="small"  :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" type="selection" width="60">
            </el-table-column>
            <el-table-column sortable prop="name" label="角色名称" width="200">
            </el-table-column>
            <el-table-column sortable prop="status" label="角色状态" width="300">               
                
            </el-table-column>
            <!-- <el-table-column sortable prop="updateTime" label="修改时间" width="200" :formatter="formatDateTime"> -->
            <el-table-column sortable prop="updatetime" label="修改时间" width="200" :formatter="formatDateTime">
            </el-table-column>
            <el-table-column sortable prop="updatorName" label="修改人" width="200">
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="300">
                <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改权限</el-button>
                <el-button size="mini" type="danger" @click="deleteRole(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

            
        </el-table>
        <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <!-- 编辑界面 -->
            <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog()' :before-close="closeDialog">
                 <el-form label-width="120px" :model="menuForm" ref="menuForm" >
                    <!-- <el-input v-model="menuForm.roleName" :disabled="true"></el-input> -->
                    <el-form-item label="角色名称" >
                         <el-input size="small" v-model="menuForm.roleName" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <div>
                        <el-checkbox v-model="menuForm.hasControll" label="控制台" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasInformation" label="信息统计" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasBusiness" label="商户管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasActivity" label="活动管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasDynamic" label="动态管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasPingtaiComplaint" label="平台投诉管理" border></el-checkbox>
                         <el-checkbox v-model="menuForm.hasWuyeComplaint" label="物业投诉管理" border></el-checkbox>
                          <el-checkbox v-model="menuForm.hasShangjiaComplaint" label="商家投诉管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasToll" label="收费管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasProperty" label="物业管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasPermission" label="权限管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasSystem" label="系统管理" border></el-checkbox>
                    </div>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" @click='closeDialog()'>取消</el-button>
                    <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm()">保存</el-button>
                </div>
            </el-dialog>
            <!-- 添加角色页面 -->
            <!-- <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog()' :before-close="closeDialog">
                 <el-form label-width="120px" :model="menuForm" ref="menuForm" >
                    
                    <el-form-item label="角色名称" >
                         <el-input size="small" v-model="menuForm.roleName" auto-complete="off" ></el-input>
                    </el-form-item>
                    <div>
                        <el-checkbox v-model="menuForm.hasControll" label="控制台" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasInformation" label="信息统计" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasBusiness" label="商户管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasActivity" label="活动管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasDynamic" label="动态管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasComplaint" label="投诉管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasToll" label="收费管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasProperty" label="物业管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasPermission" label="权限管理" border></el-checkbox>
                        <el-checkbox v-model="menuForm.hasSystem" label="系统管理" border></el-checkbox>
                    </div>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" @click='closeDialog()'>取消</el-button>
                    <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm()">保存</el-button>
                </div>
            </el-dialog> -->

    </div>

</template>
<script>
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            title:'权限修改',
           editFormVisible: false, //控制编辑页面显示与隐藏
             loading: false,//加载页面（转圈圈）
            //后端返回的数据
            listData:[],
            //权限表
           menuForm: {
            roleId:'',
            roleName:'',
            menus:[],
            hasControll:'',
            hasInformation:'',
            hasToll:'',
            hasActivity:'',
            hasPingtaiComplaint:'',
            hasWuyeComplaint:'',
            hasShangjiaComplaint:'',
            hasProperty:'',
            hasPermission:'',
            hasSystem:'',
            hasDynamic:'',
            hasBusiness:''
        },
        
            //可能传到后端的数据
            formInline: {
                page: 1,
                limit: 10,
                data:{

                }
                // name: '',
                // status: '',
                // creatorId: '',
                // updatorId: '',
                // varLable: '',
                // varName: '',
                // token: localStorage.getItem('token')
            },
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            }
        }
    },
     // 注册组件
  components: {
    Pagination
  },
    created(){
        this.getdata(this.formInline)
    },
    methods: {
        //获取角色列表
        
        getdata(obj){
            this.loading = true
            //分页查询所有角色数据
           this.$axios.post("/api/rolepermmenu/role/findAll",obj)
           .then((res) => {
               this.loading = false; 
            //    console.log(res.data)
               this.listData=res.data.data.list
               // 分页赋值
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.data.data.total    
               for (let index = 0; index < this.listData.length; index++) {
                   if(this.listData[index].status==1){
                       this.listData[index].status='正常';
                   }else{
                       this.listData[index].status='注销';
                   }
                   
               }
           })
           .catch();
        },
        //修改权限事件
        handleEdit(index,row){
            this.editFormVisible=true
            //  
            if (row != undefined && row != 'undefined') {
                this.title = '修改权限'
                this.$axios.get("api/rolepermmenu/menu/findByRoleId/"+row.id)
                .then(res => {
                    // this.menuFrom.roleId=parseInt(row.id);
                    this.menuForm.roleId=row.id;
                    this.menuForm.roleName=row.name;
                    this.menuForm.menus=res.data.data;
                    // console.log(parseInt(row.id))
                    // console.log(row.id)
                        
                    if(res.data.code == 200){
                        if(this.menuForm.menus.indexOf("控制台")> -1){
                            this.menuForm.hasControll=true;
                        }
                        if(this.menuForm.menus.indexOf("信息统计")> -1){
                            this.menuForm.hasInformation=true;
                        }
                        if(this.menuForm.menus.indexOf("商户管理")> -1){
                            this.menuForm.hasBusiness=true;
                        }
                        if(this.menuForm.menus.indexOf("活动管理")> -1){
                            this.menuForm.hasActivity=true;
                        }
                        if(this.menuForm.menus.indexOf("动态管理")> -1){
                            this.menuForm.hasDynamic=true;
                        }
                        if(this.menuForm.menus.indexOf("平台投诉管理")> -1){
                            this.menuForm.hasPingtaiComplaint=true;
                        }
                        if(this.menuForm.menus.indexOf("物业投诉管理")> -1){
                            this.menuForm.hasWuyeComplaint=true;
                        }
                        if(this.menuForm.menus.indexOf("商家投诉管理")> -1){
                            this.menuForm.hasShangjiaComplaint=true;
                        }
                        if(this.menuForm.menus.indexOf("收费管理")> -1){
                            this.menuForm.hasToll=true;
                        }
                        if(this.menuForm.menus.indexOf("物业管理")> -1){
                            this.menuForm.hasProperty=true;
                        }
                        if(this.menuForm.menus.indexOf("权限管理")> -1){
                            this.menuForm.hasPermission=true;
                        }
                        if(this.menuForm.menus.indexOf("系统管理")> -1){
                            this.menuForm.hasSystem=true;
                        }

                 }

                }).catch(err =>{
                    this.$message.error('错误')
                })
                console.log(this.menuForm)
                // this.editForm.updatorId = (JSON.parse(localStorage.getItem("userData"))).id;
                
            } else {  
                this.title = '添加角色'
                //重置menuFrom
                this.menuForm.roleId=0,
                this.menuForm.menus=[],
                this.menuForm.hasControll='',
                this.menuForm.hasInformation='',
                this.menuForm.hasToll='',
                this.menuForm.hasActivity='',
                this.menuForm.hasPingtaiComplaint='',
                this.menuForm.hasWuyeComplaint='',
                this.menuForm.hasShangjiaComplaint='',
                this.menuForm.hasProperty='',
                this.menuForm.hasPermission='',
                this.menuForm.hasSystem='',
                this.menuForm.hasDynamic='',
                this.menuForm.hasBusiness=''
      
                // this.$axios.get("api/rolepermmenu/role/addOne",).then(
                //     res =>{

                //     }
                // ).catch(err =>{

                // })
                // this.editForm.creatorId = (JSON.parse(localStorage.getItem("userData"))).id;
            }
        },
        //删除角色事件
        deleteRole(index,row){
            console.log(row)
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.$axios.delete("/api/rolepermmenu/role/deleteOneById/" + row.id)
                .then(res=>{
                    console.log(res)
                }).catch(err=>{})
            })
        },
         // 分页插件事件
            callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
            },
        // 关闭编辑、增加弹出框
        closeDialog() {
            this.menuForm.roleName='',
            this.menuForm.roleId=0,
            this.menuForm.menus=[],
            this.menuForm.hasControll='',
            this.menuForm.hasInformation='',
            this.menuForm.hasToll='',
            this.menuForm.hasActivity='',
            this.menuForm.hasPingtaiComplaint='',
            this.menuForm.hasWuyeComplaint='',
            this.menuForm.hasShangjiaComplaint='',
            this.menuForm.hasProperty='',
            this.menuForm.hasPermission='',
            this.menuForm.hasSystem='',
            this.menuForm.hasDynamic='',
            this.menuForm.hasBusiness=''
            this.editFormVisible = false
        },


        //添加角色保存事件
        // addForm(obj){
        //     console.log(this.menuForm)
        //     this.menuForm.menus=[]
        //     // this.menuForm.menus.push(this.menuForm.roleId)
        //     if(this.menuForm.hasControll==true){
        //         this.menuForm.menus.push("控制台")
        //     }
        //     if(this.menuForm.hasInformation==true){
        //         this.menuForm.menus.push("信息统计")
        //     }
        //     if(this.menuForm.hasBusiness==true){
        //         this.menuForm.menus.push("商户管理")
        //     }
        //     if(this.menuForm.hasActivity==true){
        //         this.menuForm.menus.push("活动管理")
        //     }
        //     if(this.menuForm.hasDynamic==true){
        //         this.menuForm.menus.push("动态管理")
        //     }
        //     if(this.menuForm.hasComplaint==true){
        //         this.menuForm.menus.push("投诉管理")
        //     }
        //     if(this.menuForm.hasProperty==true){
        //         this.menuForm.menus.push("物业管理")
        //     }
        //     if(this.menuForm.hasToll==true){
        //         this.menuForm.menus.push("收费管理")
        //     }
        //     if(this.menuForm.hasPermission==true){
        //         this.menuForm.menus.push("权限管理")
        //     }
        //     if(this.menuForm.hasSystem==true){
        //         this.menuForm.menus.push("系统管理")
        //     }
        //     // console.log(this.menuForm.menus)
        //     this.$axios.post("api/rolepermmenu/role/addOne",
        //         {   name: this.menuForm.roleName,
        //             data: this.menuForm.menus})
        //     .then(res =>{
        //         console.log("添加返回的数据"+res)
        //        if(res.data.code==200){
        //            //保存成功后关闭编辑框
        //         //    this.getdata(this.formInline)
        //            this.editFormVisible = false
        //        }else{
        //            this.$message.info('修改失败')
        //        }
        //     }).catch(err =>{
        //         this.$message.error('修改错误')
        //     })

        //     //保存后调用关闭编辑框方法
        //     // this.closeDialog();
        //     //  this.editFormVisible = false
        //     this.getdata(this.formInline)
        // },
        //保存事件（更新，修改menu）
        submitForm(obj){
            console.log(this.menuForm)
            this.menuForm.menus=[]
            this.menuForm.menus.push(this.menuForm.roleId)
            if(this.menuForm.hasControll==true){
                this.menuForm.menus.push("控制台")
            }
            if(this.menuForm.hasInformation==true){
                this.menuForm.menus.push("信息统计")
            }
            if(this.menuForm.hasBusiness==true){
                this.menuForm.menus.push("商户管理")
            }
            if(this.menuForm.hasActivity==true){
                this.menuForm.menus.push("活动管理")
            }
            if(this.menuForm.hasDynamic==true){
                this.menuForm.menus.push("动态管理")
            }
            if(this.menuForm.hasPingtaiComplaint==true){
                this.menuForm.menus.push("平台投诉管理")
            }
            if(this.menuForm.hasWuyeComplaint==true){
                this.menuForm.menus.push("物业投诉管理")
            }
            if(this.menuForm.hasShangjiaComplaint==true){
                this.menuForm.menus.push("商家投诉管理")
            }
            if(this.menuForm.hasProperty==true){
                this.menuForm.menus.push("物业管理")
            }
            if(this.menuForm.hasToll==true){
                this.menuForm.menus.push("收费管理")
            }
            if(this.menuForm.hasPermission==true){
                this.menuForm.menus.push("权限管理")
            }
            if(this.menuForm.hasSystem==true){
                this.menuForm.menus.push("系统管理")
            }
            // console.log(this.menuForm.menus)
            this.$axios.put("api/rolepermmenu/menu/updateMenus",this.menuForm.menus)
            .then(res =>{
                console.log(res)
               if(res.data.code==200){
                   //保存成功后关闭编辑框
                //    this.getdata(this.formInline)
                //保存后调用关闭编辑框方法
                  this.closeDialog();
                //    this.editFormVisible = false
               }else{
                   this.$message.info('修改失败')
               }
            }).catch(err =>{
                this.$message.error('修改错误')
            })

            
            //  this.editFormVisible = false
            this.getdata(this.formInline)
        }
    },
}
</script>